<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<h2>创建表格</h2>
<hr>
<h3>一列</h3>
<table border="1">
    <tr>
        <td>100</td>
    </tr>
</table>

<h3>一列三行</h3>

<table border="1" >
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>

    </tr>

</table>

<h3>两列三行</h3>

<table border="1" bgcolor="#ffffe0" style="width: 400px;height: 180px; border-color: aquamarine;" >



    <tr>
        <th width="100" height="60" align="right" dir="auto">header1</th>
        <th width="150" height="60" align="center" dir="auto">header2</th>
        <th width="150" height="60" align="left" dir="auto">header3</th>

    </tr>

    <tr>


        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>

    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>

</table>

<h3>定义表格间空隙</h3>

<!--cellpadding单元格边框和内容之间的距离-->
<!--cellspacing单元格和单元格之间的距离-->

<table bgcolor="#f0f8ff" border="1" width="300px" height = "180px" cellpadding="30px" cellspacing="15px">

    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>

    </tr>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>

    </tr>

    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>

    </tr>


</table>



<h2>合并单元格</h2>
<hr>


<table border="1" width="300px" height="300px">

    <tr>
        <th colspan="3">header1</th>
<!--        <th>header2</th>-->
<!--        <th>header3</th>-->

    </tr>

    <tr>
       <td rowspan="2">100</td>
        <td>100</td>
        <td>100</td>

    </tr>
    <tr>
        <td>200</td>
        <td>200</td>


    </tr>

    <tr>
        <td colspan="3">300</td>


    </tr>
</table>

<h2>表格头部/主体/页脚</h2>
<hr>

<table border="1" width="100%" height="200" bgcolor="#ffffe0" style="border-color: azure">



    <thead>
    <tr>
<!--        <td colspan="3">标题</td>-->

        <th colspan="3">标题</th>
    </tr>

    </thead>

    <tfoot>

    <tr>
        <td colspan="3">页脚</td>


    </tr>

    </tfoot>

    <tbody>

    <tr>
        <td>200</td>
        <td>200</td>
        <td>200</td>

    </tr>

    </tbody>



</table>


<h2>表格的嵌套</h2>
<hr>

<table border="1"  width="100%">

    <tr>
        <td>
            <table border="1">

                <tr>
                    <td>xing</td>
                    <td>wei</td>
                    <td>xin</td>
                </tr>

                <tr>
                    <td>xing</td>
                    <td colspan="2">weixin</td>
                </tr>

                <tr>
                    <td colspan="3">xingweixin</td>

                </tr>


            </table>



        </td>

    </tr>

</table>






</body>
</html>